<template>
  <div ref="myEchart" style="height: 320px;"></div>
</template>
<script>
import { reactive, toRefs, onMounted, ref, watch } from 'vue'
// import { map_statistics } from "@/api/login"
import * as echarts from 'echarts'
export default {
  name: '',
  setup() {
    const state = reactive({
      data: [
        {
          name: "总设备",
          value: ""
        },
        {
          name: "在线设备",
          value: ""
        },
        {
          name: "离线设备",
          value: ""
        },
      ],
      myEchart: ref(),
      img2: '',

    })
    var chart = {}
    // 小气泡

    // let myChart = echarts.init(state.myEchart)
    //字符串截取
    var wordLength = (value) => {
      var ret = ""; //拼接加\n返回的类目项
      var maxLength = 4; //每项显示文字个数
      var valLength = value.length; //X轴类目项的文字个数
      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      if (rowN > 1) //如果类目项的文字大于3,
      {
        for (var i = 0; i < rowN; i++) {
          var temp = ""; //每次截取的字符串
          var start = i * maxLength; //开始截取的位置
          var end = start + maxLength; //结束截取的位置
          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
          temp = value.substring(start, end) + "\n";
          ret += temp; //凭借最终的字符串
        }
        return ret;
      } else {
        return value;
      }
    }
    //偏移量
    var offsetData = [
      [80, 53],
      [35, 73],
      [30, 33],
      [60, 33],
      [10, 48]
    ];
    //symbolSize 散点气泡大小
    var symbolSizeData = [105, 95, 85];
    //循环定义series的data值
    var datas = [];
    const init = () => {
      map_statistics().then(r => {
        let arr = [
          {
            name: "总设备",
            value: r.data.total_num
          },
          {
            name: "在线设备",
            value: r.data.online_num
          },
          {
            name: "离线设备",
            value: r.data.offline_num
          },
        ]

        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          //var itemToStyle = datalist[i];
          datas.push({
            name: wordLength(item.name) + "\n"+ "\n"  + item.value,
            value: offsetData[i],
            symbolSize: symbolSizeData[i],
            label: {
              normal: {
                textStyle: {
                  fontSize: "14",
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [{
                  offset: 0,
                  color: "rgba(31,102,162,0)",
                },
                {
                  offset: 1,
                  color: "rgba(31,102,192,0.6)"
                }
                ]),
                opacity: 0.8,
                shadowColor: '#2e78eca8',
                shadowBlur: 10,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
              },

            }
          });
        }
      })
    }
    init()
    const loadCharts = () => {
      // var rotation = 0;
      // const dEchart = document.getElementById("echart1");
      chart = echarts.init(state.myEchart)
      // 计算田地摄像头数量
      if (chart) {
        var option = {
          //   backgroundColor: "transparent",
          // backgroundColor: '#0e2147',
          animation: true,
          grid: {
            show: false,
            top: 10,
            bottom: 10
          },
          xAxis: [{
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5
          }],
          yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30
          }],
          series: [{
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20"
                }
              }
            },
            animationDurationUpdate: 1000,
            animationEasingUpdate: 1000,
            animationDelay: function (idx) {
              // 越往后的数据延迟越大
              return idx * 100;
            },
            itemStyle: {
              normal: {
                color: "#00acea"
              }
            },
            data: datas
          }],
          graphic: [
            {
              type: 'image',
              id: 'logo',
              left: '45%',
              bottom: '30%',
              z: -10,
              bounding: 'raw',
              origin: [675, 5],
              //  position: [100, 0], // 平移，默认值为 [0, 0]。
              style: {
                image: state.img2,
                width: 120,
                height: 120,
                opacity: 0.4
              }
            },
            {
              type: 'image',
              id: 'logo1',
              right: '14%',
              bottom: '0',
              z: -10,
              bounding: 'raw',
              origin: [275, 5],
              style: {
                image: state.img2,
                width: 80,
                height: 80,
                opacity: 0.4
              }
            },
            {
              type: 'image',
              id: 'logo2',
              left: '10%',
              bottom: '2%',
              z: -10,
              bounding: 'raw',
              origin: [875, 15],
              style: {
                image: state.img2,
                width: 60,
                height: 60,
                opacity: 0.4
              }
            }, {
              type: 'image',
              id: 'logo3',
              left: '36%',
              bottom: 0,
              z: -10,
              bounding: 'raw',
              origin: [975, 5],
              style: {
                image: state.img2,
                width: 40,
                height: 40,
                opacity: 0.4
              }
            },
            {
              type: 'image',
              id: 'logo4',
              left: '32%',
              bottom: '10%',
              z: -10,
              bounding: 'raw',
              origin: [76, 76],
              style: {
                image: state.img2,
                width: 50,
                height: 50,
                opacity: 0.4
              }
            },
            {
              type: 'image',
              id: 'logo5',
              left: '40%',
              bottom: '35%',
              z: -10,
              bounding: 'raw',
              origin: [76, 76],
              style: {
                image: state.img2,
                width: 90,
                height: 90,
                opacity: 0.4
              }
            },
          ],
        };
        // chart.setOption(option);
        chart.setOption(option);
        window.addEventListener("resize", function () {
          chart.resize();
        });
      }
      var rotation = 0;
      setInterval(function () {
        chart.setOption({
          graphic: [
            {
              id: 'logo',
              rotation: -(rotation += Math.PI / 860) % (Math.PI * 2),
            },
            {
              id: 'logo1',
              rotation: -(rotation += Math.PI / 640) % (Math.PI * 2),
            },
            {
              id: 'logo2',
              rotation: -(rotation += Math.PI / 360) % (Math.PI * 2),
            },
            {
              id: 'logo3',
              rotation: -(rotation += Math.PI / 720) % (Math.PI * 2),
            },
          ]
        });
      }, 30);
    }



    onMounted(() => {
      setTimeout(() => {
        loadCharts()
      }, 2000)
    })
    return {
      ...toRefs(state),
    }
  },
}

</script>
<style scoped lang='scss'></style>